Skip to main content

条件渲染和列表渲染

V-IF

我们在JavaScript中使用条件的方式是if/else，用于判断某个条件成立与否执行某段逻辑。

在 vue 中使用v-if/v-else来实现

</script>
export default {
  ...,
  data() {
    return {
      name: '三木',
      html: '<h1>我是三木</h1>',
      show: true,
    };
  },
};
</script>

<template>
    ...
  <div v-if="show">三</div>
  <div v-else="show">木</div>
</template>

上面的代码，结果如下。发现只显示了三，木并没有显示，因为当前的 show=true。

Untitled

如果我们想实现 else if 的效果，使用v-else-if即可

<div v-else-if="type === 'C'"></div>

v-show

v-show 可以用于显示或隐藏元素。与v-if的区别在于，v-show类似于display:none，当元素不显示时，它仍然在 DOM 中渲染，但是不会显示，而v-if则直接在 HTML 中不显示元素。

{ show: true }
<div v-show="show"></div>

列表循环 v-for

同样地，在 JavaScript 中，我们使用 for 关键字来遍历数组。在 Vue 中，我们则使用 v-for 指令。

arr: [1, 2, 3, 4]

<ul>
  <li v-for="value in arr">{{ value }}</li>
</ul>

结果如下。

Untitled

如果我们的数组是一个对象数组。

objArr: [{name:'三'},{name:'木'}]

<ul>
  <li v-for="obj in objArr">{{ obj.name }}</li>
</ul>

Untitled

注​

当 v-if 和 v-for 同时存在于一个节点上时，v-if 的优先级比 v-for 更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

// 报错
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}</li>

在外新包装一层  <template>   再在其上使用  v-for   可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">{{ todo.name }}</li>
</template>

另外需要注意的一件事，对于循环里面的子元素，需要增加一个:key关键字

Vue 中的条件渲染使用 v-if/v-else，v-show 显示/隐藏元素，v-for 循环数组/对象。若 v-if 和 v-for 同时存在，则 v-if 优先级高。需在外层包装 template 并使用 v-for 解决。循环内的子元素需增加:key 关键字。